<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
		<link rel="stylesheet" type="text/css" href="../css/aui.css"/>
    <style>
			body,html{
					background:#f2f2f2;
			}
			.box{
				display:flex;
			display:-webkit-flex;
			height: 2.5rem;
			width: 100%;
			margin-bottom: 1px;
			background: white;
			padding: 0 0.5rem
			}
			.box div{
				height: 100%;
				line-height: 2.5rem
			}
			.pictures{
				width:100%;
				height:auto;
				background:white;
			}
			.pictures .picture{
				margin:0.3rem;
				width:4rem;
				height:4rem;
				float:left;
				overflow:hidden;
				text-align:center;
				line-height: 4rem;
				background:#DDDDDD;
				color:white;
			}
			.pictures .picture img{
				width:100%;
				height:100%;
				display:block;
			}
			.pictures div:last-child{

				clear:both;
			}
			.bottom{
	        width: 100%;
	        height: 3rem;
	        position: fixed;
	        bottom: 0;
	        left: 0;
	    }
	    .bottom div{
	        height:100%;
	        text-align: center;
	        line-height: 3rem;
	        color: white;
	        font-size: 4.5vw;
	    }
    </style>
</head>
<body>
	<div class="box">
		 <div>
			 游戏名称：
		 </div>
		 <div class="aui-list-item-input">
				<input type="text" disabled placeholder="" style="height: 2.5rem" id="gameName"/>

		 </div>
	</div>
	<div class="box">
		 <div>
			 游戏账号：
		 </div>
		 <div>
			 <input type="text" disabled placeholder="" style="height: 2.5rem" id="gameUser"/>
		 </div>
	</div>
	<div class="box">
		 <div>
			 交易金额：
		 </div>
		 <div>
			 <input type="number" disabled placeholder="" style="height: 2.5rem" id="price"/>
		 </div>
	</div>
	<div class="box">
		 <div>
			 自动确认收货时间：
		 </div>
		 <div>
			 <span id="getGoodsTime"></span>
		 </div>
	</div>
	<div class="box">
		 <div>
			 是否需要承担手续费：
		 </div>
		 <div>
			 <input type="checkbox" disabled class="aui-switch" style="margin-top: 0.6rem;margin-right: 1rem" id="isPayFee"/>
			 <span id="isPay">否</span>
		 </div>
	</div>
	<div class="box" style="margin-top: 0.5rem;">
		 <div style="padding-left: 0.5rem">
			 沟通渠道：
		 </div>
		 <div>
			 <input type="text" disabled  placeholder="" style="height: 2.5rem;width: 100%" id="commuPlat"/>
		 </div>
	</div>
	 <div class="box">
    		<div style="padding-left: 0.5rem" >
    			卖家昵称：
    		</div>
    		<div>
    			<input type="text" disabled placeholder="" style="height: 2.5rem" id="sellerName"/>
    		</div>
    </div>
		<div class="box">
	   		<div style="padding-left: 0.5rem" >
	   			卖家等级：
	   		</div>
	   		<div>
	   			<input type="text" disabled placeholder="" style="height: 2.5rem" id="sellerLevel"/>
	   		</div>
	   </div>
	<div class="box">
   		<div style="padding-left: 0.5rem" >
   			买家<span id="wayBname"></span>账号：
   		</div>
   		<div>
   			<input type="text" disabled placeholder="" style="height: 2.5rem" id="buyerAccount"/>
   		</div>
   </div>
   <div class="box">
   		<div style="padding-left: 0.5rem" class="aui-ellipsis-1">
   			卖家<span id="waySname"></span>账号：
   		</div>
   		<div>
   			<input type="text" disabled placeholder="" style="height: 2.5rem" id="sellerAccount"/>
   		</div>
   </div>
	<div class="box">
		 <div style="padding-left: 0.5rem">
			 聊天截图：
		 </div>
	</div>
	<div class="pictures">


	</div>
	<div class="box" style="margin-top: 1px;">
		 <div style="padding-left: 0.5rem">
			 其他备注：
		 </div>
	</div>
	<div style="width: 100%;background: white;padding: 0.5rem 0.5rem;margin-bottom:3rem">
		 <textarea name="" id="otherMsg" disabled cols="30" rows="10" placeholder="请输入其他备注信息" style="height:auto;overflow:scroll"></textarea>
	</div>
	<div class="bottom aui-row">
      <div class="aui-col-xs-8" style="background:white">
        <div style="width:100%;height:50%;line-height:1.5rem;padding-right:0.3rem;text-align:right">
          <span style="color:black">实付款：&yen;</span>
          <span style="color:red" id="finalPrice"></span>
        </div>
        <div style="width:100%;height:50%;line-height:1.5rem;padding-right:0.3rem;text-align:right;color:#666666;font-size:2vh">
          <span>其中手续费：&yen;</span>
          <span id="serPrice"></span>
        </div>
      </div>
      <div class="aui-col-xs-4" style="background:#ff4800" onclick="goToPay()">立即支付</div>
  </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/request.js"></script>
<script type="text/javascript" src="../script/aui-dialog.js"></script>
<script type="text/javascript">

	var imgArray;
	var ret;
	var oInfo = {};
	apiready = function(){
		ret = api.pageParam.data;
		$api.val($api.byId('gameName'), ret.order.game_name);
		$api.val($api.byId('gameUser'), ret.order.game_account);
		$api.val($api.byId('price'), ret.order.price);
		if(ret.order.fee_payer == 'buyer'){
			$api.attr($api.byId('isPayFee'), 'checked', 'checked');
			$api.text($api.byId('isPay'), '需要');
			$api.text($api.byId('serPrice'), ret.order.fee);
		}else{
			$api.text($api.byId('isPay'), '不需要');
			$api.text($api.byId('serPrice'), '0.00');
		}
		$api.val($api.byId('commuPlat'), ret.order.commu_plat);
		$api.val($api.byId('sellerName'), ret.order.seller_name);
		$api.val($api.byId('sellerLevel'), ret.order.seller_level);
		$api.text($api.byId('wayBname'), ret.order.commu_plat);
		$api.val($api.byId('buyerAccount'), ret.order.buyer_account);
		$api.text($api.byId('waySname'), ret.order.commu_plat);
		$api.val($api.byId('sellerAccount'), ret.order.seller_account);
		$api.text($api.byId('getGoodsTime'), ret.order.getgoods_time);
		$api.val($api.byId('otherMsg'), ret.order.other_msg);
		$api.text($api.byId('finalPrice'), ret.order.finalPay);
		imgArray = ret.order.commu_img.split(',');
		var html='';
		if(ret.order.commu_img != ''){
			for(var i=0;i<imgArray.length;i++){
				imgArray[i] = pictureUrl+imgArray[i];
				html+='<div class="picture" onclick="pictureBrowse('+i+')"><img src="'+imgArray[i]+'"/></div><div></div>';
			}
			html+='<div></div>';
			$api.html($api.dom('.pictures'), html);
		}
		// getOrderMess();
		api.addEventListener({
		    name: 'goToChatRoom'
		}, function(ret, err){
		    if(ret){
					var sellerInfo = ret.value.sellerInfo;
					api.openWin({
							name: 'chatRoom',
							url: './winChatroom.html',
							pageParam: {
									page:'chatRoom',
									title: '联系卖家',
									data:sellerInfo
							}
					});
		    }
		});

	};


	function pictureBrowse(index){
		api.openWin({
	        name: 'pictureBrowse',
	        url: 'pictureBrowse.html',
	        pageParam:{
	        	images:imgArray,
	        	index:index
	        },
	        animation:{
	        	type:'fade',
	        	duration:300
	        }
        });
	}
	function goToPay(){
		var data = {};
		data['values'] = {};
		data['values']['body'] = ret.order.game_name+ret.order.game_account;
		data['values']['subject'] = ret.order.seller_name;
		data['values']['out_trade_no'] = ret.order.order_num;
		data['values']['total_amount'] = ret.order.finalPay;
		data['values']['product_code'] = 'QUICK_MSECURITY_PAY';
		oInfo['orderNum'] = ret.order.order_num;
		oInfo['shopName'] = ret.order.seller_name;
		oInfo['goods'] = ret.order.game_name+ret.order.game_account;
		oInfo['payMoney'] = ret.order.finalPay;
		requestData('Pay/aliPay',data,'NO','NO','NO',_callbackOrderInfo);
	}
	function _callbackOrderInfo(ret){
		if(ret.status == 200){
			var aliPayPlus = api.require('aliPayPlus');
			aliPayPlus.payOrder({
				orderInfo:htmlspecialchars_decode(ret.orderInfo)
			},function(ret,err){
				if(ret.code == 8000){
					api.openWin({
			            name: 'payErr',
			            url: './payErr.html',
			            pageParam:{
			            	data:'正在处理中...请稍候！'
			            }
		            });
				}else if(ret.code == 4000){
					api.openWin({
			            name: 'payErr',
			            url: './payErr.html',
			            pageParam:{
			            	data:'订单支付失败!'
			            }
		            });
				}else if(ret.code == 6001){
					api.openWin({
			            name: 'payErr',
			            url: './payErr.html',
			            pageParam:{
			            	data:'您已经取消支付！'
			            }
		            });
				}else if(ret.code == 6002){
					api.openWin({
			            name: 'payErr',
			            url: './payErr.html',
			            pageParam:{
			            	data:'网络故障！请稍候查看'
			            }
		            });
				}else if(ret.code == 9000){
					var myDate = new Date();
					var year = myDate.getFullYear();
					var month = myDate.getMonth()*1+1;
					var day = myDate.getDate();
					var hours = myDate.getHours();
					var minute = myDate.getMinutes();
					var second = myDate.getSeconds();
					oInfo['payTime'] = year+'-'+month+'-'+day+' '+hours+':'+minute+':'+second;
					oInfo['orderType'] = 'yuehao';
					if(oInfo){
						api.openWin({
				            name: 'payOk',
				            url: './payOk.html',
				            pageParam:{
				            	data:oInfo
				            }
			            });
					}
				}
			});
		}else{
			api.toast({
	          msg: ret.msg,
	          duration: 4000,
	          location: 'bottom'
	       });
	       setTimeout(function(){
	       		window.location.reload();
	       },1000);
		}
	}
	function htmlspecialchars_decode(str){
		str = str.replace(/&amp;/g, '&');
		str = str.replace(/&lt;/g, '<');
		str = str.replace(/&gt;/g, '>');
		str = str.replace(/&quot;/g, "''");
		str = str.replace(/&#039;/g, "'");
		return str;
	}
</script>
</html>
